<template>
    <view class="remark" :style="{paddingTop: paddingHeight + 'px'}">
        <nav-bar title="代谢等级"></nav-bar>
        <view class="container">
            <view class="icon-box">
                <view class="item">
                    <u-image
                        width="64rpx"
                        height="64rpx"
                        src="http://oss.antaimedical.com/images/pro/2024/10/671758d1e4b0d615350f30a0o0ahCRpcwWKL5f7447dc6bbc70a152b443000f5de539.png"
                        :lazy-load="true"
                    ></u-image>
                    <text>{{RERtype}}</text>
                </view>
                <view class="item">
                    <u-image
                        width="64rpx"
                        height="64rpx"
                        src="http://oss.antaimedical.com/images/pro/2024/10/67175904e4b0be9d444233b0fGyc5JOHQ5iK64cb5bd2a377ddcbb30db481d07d9388.png"
                        :lazy-load="true"
                    ></u-image>
                    <text>{{measureTime}}</text>
                </view>
            </view>
            <view
                class="cell"
                v-for="(item) in tips"
                :key="item.id"
                :class="{'active':item.id == rerLevel}"
            >
                <view class="level" :style="{backgroundColor: item.bgColor}">{{ item.id }}</view>
                <view class="info">
                    <view class="i_t">{{ item.title }}</view>
                    <view class="i_b">{{ item.subTitle }}</view>
                </view>
            </view>
            <view class="textarea_c">
                <view class="title">
                    <text>备注</text>
                    <u-image
                        v-if="disabled"
                        width="40rpx"
                        height="40rpx"
                        src="http://oss.antaimedical.com/images/pro/2024/10/67175dc9e4b0be9d444233b1PiKmA25Tcwxk1e0529f44e32a346b3955e96bd1d5496.png"
                        :lazy-load="true"
                        @click="edit"
                    ></u-image>
                    <view class="save-btn" v-else @click="$u.throttle(save, 1500)">保存</view>
                </view>
                <u-textarea
                    v-model="content"
                    :disabled="disabled"
                    :focus="!disabled"
                    placeholder="深圳安钛科技有限公司（以下简称「安钛健康」或「我们」）非常重视您的个人信息，并让您对个人信息拥有控制权，我们会使用强大的加密技术来保护您的隐私。"
                ></u-textarea>
            </view>
            <!-- <view class="large_button" @click="$u.throttle(save, 1500)">保存</view> -->
        </view>
    </view>
</template>

<script>
import {
    addRemark
} from '@/api/index.js'
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            tips: [{
                id: 1,
                bgColor: '#7CD37E',
                title: '燃烧脂肪供能',
                subTitle: '80%-100%燃脂--早晨目标'
            }, {
                id: 2,
                bgColor: '#78B2DD',
                title: '绝大多数燃烧脂肪供能',
                subTitle: '60%-80%燃脂--早晨目标'
            }, {
                id: 3,
                bgColor: '#9C70DE',
                title: '几乎同等燃烧脂肪和碳水化合物供能',
                subTitle: '40%-60%燃脂'
            }, {
                id: 4,
                bgColor: '#FFA168',
                title: '绝大多数燃烧碳水供能',
                subTitle: '60%-80%燃烧碳水供能'
            }, {
                id: 5,
                bgColor: '#F1C56B',
                title: '燃烧碳水供能',
                subTitle: '80%-100%燃烧碳水供能'
            }],
            type: 'add',
            content: '', // 测量记录备注内容
            rerLevel: '', // 等级
            recordId: null, // 测量记录id
            RERtype: '', // 测量记录RERtype
            measureTime: '', // 测量记录时间
            disabled: true,
        }
    },
    onLoad (OPTIONS) {
        this.RERtype = OPTIONS.type
        this.measureTime = OPTIONS.measureTime
        this.recordId = OPTIONS.id
        this.rerLevel = OPTIONS.rerLevel
        this.content = OPTIONS.content
    },
    methods: {
        edit () {
            this.disabled = false
        },
        async save () {
            if (!this.content) return
            uni.showLoading({
                title: '加载中...'
            })
            let params = {
                remark: this.content,
                id: this.recordId
            }
            try {
                const res = await addRemark(params)
                uni.hideLoading()
                if (res.code == 200) {
                    this.disabled = true
                    uni.showToast({
                        title: '添加成功'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                }
            } catch (e) {
                //TODO handle the exception
                uni.hideLoading()
            }
        }
    }
}
</script>


<style lang="scss">
page {
    background-color: #f5f6fa;
    min-height: 100%;

    .u-textarea {
        border-radius: 16rpx !important;
        padding: 24rpx !important;
        border: 0 !important;
        background-color: #fafafa;

        .u-textarea__field {
            font-size: 24rpx;
            color: #666666;
            text-align: left;
        }
    }
}
</style>
<style lang="scss" scoped>
.remark {
    .container {
        padding: 48rpx;

        .cell {
            width: 100%;
            height: 140rpx;
            margin-bottom: 16rpx;
            padding: 0 32rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #666666;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            .level {
                width: 44rpx;
                height: 44rpx;
                line-height: 44rpx;
                border-radius: 16rpx;
                color: #fff;
                font-size: 28rpx;
                text-align: center;
            }

            .info {
                flex: 1;
                padding-left: 32rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;

                .i_t {
                    font-size: 28rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                }

                .i_b {
                    padding-top: 8rpx;
                    font-size: 24rpx;
                }
            }
        }

        .textarea_c {
            width: 100%;
            padding: 32rpx;
            background-color: #fff;
            border-radius: 32rpx;

            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-weight: 500;
                font-size: 28rpx;
                color: #666666;
                font-family: PingFangSC-Medium, PingFang SC;
                padding-bottom: 8rpx;
                text-align: left;
            }
            .save-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 64rpx;
                height: 40rpx;
                background: #839bfc;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #ffffff;
            }
        }
        .icon-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 48rpx;
            .item {
                margin-right: 24rpx;
                padding-left: 16rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 180rpx;
                height: 48rpx;
                background: #ffffff;
                border-radius: 198rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
            }
        }
    }

    .large_button {
        position: fixed;
        bottom: 76rpx;
        left: 50%;
        transform: translateX(-50%);
    }
    .active {
        background: #ffffff !important;
        box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 24rpx 24rpx 24rpx 24rpx;
    }
}
</style>